<template>
	<view>
		<view class="detailedBox">
			<view class="detailedTotal">
				<view class="title">订单金额</view>
				<view class="amount">¥{{orderInfo.order.goodsAmount || '暂无'}}</view>
			</view>
			<view class="detailedBoxItem">
				<view>
					<view>订单号</view>
					<view>{{orderInfo.order.orderCode}}</view>
				</view>
				<view>
					<view>顾客编号</view>
					<view>{{orderInfo.orderMember.memberCode}}</view>
				</view>
				<view>
					<view>姓名</view>
					<view>{{orderInfo.orderMember.realName}}</view>
				</view>
				<view>
					<view>订单类型</view>
					<view>{{orderInfo.order.orderTypeDesc}}</view>
				</view>
				<view>
					<view>日期</view>
					<view>{{orderInfo.order.creatTime}}</view>
				</view>
				<view>
					<view>运费</view>
					<view>{{orderInfo.order.freight}}</view>
				</view>
			</view>
		</view>
		<view class="integralBox">
			<view class="integralBoxName">支付账户, 可以多选组合支付, 优先扣减上面的账户 </view>
			<view class="integralItemBox">
				<checkbox-group @change="checkboxChange">
					<view class="acea-row row-between-wrapper" v-if="orderInfo.order.orderType==2">
						<view>重消积分账户</view>
						<view class="acea-row row-middle">
							<view class="font-color" style="margin-right:10rpx;">¥{{walletBalanceInfo.reconsumeAccount}}</view>
								<checkbox  value="3" />
						</view>
					</view>
						<view class="acea-row row-between-wrapper" v-if="orderInfo.order.orderType!==2">
							<view>消费积分账户</view>
							<view class="acea-row row-middle">
								<view class="font-color" style="margin-right:10rpx;">¥{{walletBalanceInfo.specialAccount}}</view>
									<checkbox  value="4" />
							</view>
						</view>
						<view class="acea-row row-between-wrapper">
							<view>充值积分账户 
							<text class="rechargeButton" @click="onlineRecharge_open" v-if="isRecharge">支付宝在线充值</text>
							</view>
							<view class="acea-row row-middle">
								<view class="font-color" style="margin-right:10rpx;">¥{{walletBalanceInfo.consumeAccount}}</view>
									<checkbox  value="1" />
							</view>
						</view>
				</checkbox-group>
			</view>
		</view>
		<view class="modifyBnt" @click="modifyBntFunc">
			提交
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popupBox">
				<view class="popupBoxTitle">支付密码</view>
				<view>
					<input v-model="payPassword" type="password" placeholder="请输入支付密码" />
				</view>
				<view class="modifyBnt" @click="payOrderSubmitFunc">提交</view>
			</view>
		</uni-popup>	
		<uni-popup ref="rechargePopup" type="bottom">
			<view class="popupBox">
				<view class="popupBoxTitle">充值金额</view>
				<view>
					<input v-model="amount" type="number" placeholder="请输入充值金额" />
				</view>
				<view class="modifyBnt" @click="onlineRecharge">提交</view>
			</view>
		</uni-popup>	
	</view>
</template>

<script>
	import {
		getOrderInfo,
		getWalletBalance,
		getPayOrderSubmit,
		getMemberInfo
	} from '@/api/directSelling.js'
	import {
		shop_ht,
	} from '@/config/app_member.js';
	import emptyPage from '@/components/emptyPage.vue'
	export default {
		components: {
			emptyPage
		},
		data() {
			return {
				orderId: "",
				saleType: "",
				orderInfo: {
					order: {},
					orderMember:{}
				},
				walletBalanceInfo: {},
				checkboxValue:[],
				payPassword:"",
				amount:"",
				isRecharge:true,
				isSendLater:0//0正常1延迟
			}
		},
		onLoad(options) {
			this.orderId = options.orderId;
			this.saleType = options.saleType;
			
		},
		onShow() {
			console.log("created");
			this.getWalletBalance();
			this.getOrderInfo();
			//#ifdef  H5
			var UA = navigator.userAgent.toUpperCase();
			let that = this;
			// if (UA.indexOf("ANDROID") != -1) { //安卓手机
			// 	let ua = window.navigator.userAgent.toLowerCase()
			// 	that.isRecharge = true;
			// }else{
			// 	that.isRecharge = false;
			// }
			//#endif
			console.log(this.isRecharge);
		},
		methods: {
			getOrderInfo() {
				let that = this;
				getOrderInfo({
					orderId: this.orderId,
				}).then((res) => {
					let data = res.data;
					console.log(data);
					that.orderInfo = data;
					if(data.order){
						this.isSendLater=data.order.isSendLater;
						if(this.isSendLater == 1) {
							uni.showModal({
							    title: '提示',
								showCancel: false,
							    content: '该订单收货所在地区，因疫情管控将延缓发货，疫情解封后，立即发货，谢谢您的理解和支持。',
							    success: function (res) {
							        if (res.confirm) {
							        } else if (res.cancel) {
							            console.log('用户点击取消');
							        }
							    }
							});
						}
					}
				}).catch((err) => {

				})
			},
			getWalletBalance() {
				let that = this;
				getWalletBalance().then((res) => {
					let data = res.data;
					that.walletBalanceInfo = data;
				}).catch((err) => {

				})
			},
			checkboxChange(e){
				let values = e.detail.value;
				console.log(values);
				this.checkboxValue=values;
			},
			modifyBntFunc(){
				this.payPassword="";
				this.$refs.popup.open();
			},
			onlineRecharge_open(){
				this.amount="";
				this.$refs.rechargePopup.open();
			},
			onlineRecharge(){
				let token=this.$w_md5.hex_md5_32Upper('tlZfbClomeo'+uni.getStorageSync('userInfo').memberCode);
				let amount=this.amount;
				let parse="?amount="+amount+"&token="+token+"&memberCode="+uni.getStorageSync('userInfo').memberCode+"&memberType=3"
				console.log(parse);
				uni.request({
					url: shop_ht+'/vt/tlZfbClomeo.do'+parse,
					method: "get",
					success: (res) => {
						console.log(res);
						this.$refs.rechargePopup.close();
						if(res.data){
							console.log("支付地址");
							console.log(res.data.data);
							//#ifdef H5
							setTimeout(() => {
								location.href = res.data.data;
							}, 100);
							// #endif
							//#ifdef APP-PLUS
							plus.runtime.openURL(res.data.data, function(res) {
								console.log(res);
							});
							// #endif
						}else{
							this.$util.Tips({
								title: `${res.data.msg}`
							});
						}
					}
				})
			},
			payOrderSubmitFunc(){
				if(this.checkboxValue.length==0){
					this.$util.Tips({
						title: '请选择账户！'
					})
					return;
				}
				if(this.payPassword!==""){
					getPayOrderSubmit({
						payPassword: this.payPassword,
						orderId: this.orderId,
						accountType:this.checkboxValue
					}).then((res)=>{
						let data=res.data;
						if(res.meta.success==true){
							getMemberInfo().then((userInfo) => {
								let userIn = userInfo.data;
								uni.setStorageSync('userInfo', userIn);
								uni.navigateTo({
									url: "/pages/users/order_confirm/paySuccess?orderId=" + this.orderId
								});
							})
						}
					})
				}else{
					this.$util.Tips({
						title: '请输入支付密码'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	body,
	page {
		// background: #fff;
		padding: 20rpx 0rpx;
		box-sizing: border-box;
	}

	.detailedBox {
		height: auto;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		border-radius: 21rpx;
		margin-bottom: 30rpx;
		background: #fff;

		.detailedTotal {
			text-align: center;

			.amount {
				font-size: 56rpx;
				font-weight: bold;
				margin-top: 25rpx;
				margin-bottom: 20rpx;
			}
		}

		>view.detailedBoxItem>view {
			display: flex;
			justify-content: space-between;
			line-height: 45rpx;
			font-size: 30rpx;
			margin-top: 25rpx;
		}
	}

	.integralBox {
		box-shadow: 0px 0px 10px #e6e6e6;
		padding: 0rpx 30rpx 0 30rpx;
		box-sizing: border-box;
		background: #fff;
		border-radius: 10rpx;

		.integralBoxName {
			height: 100rpx;
			line-height: 100rpx;
			color: #282828;
			font-size: 30rpx;
			font-weight: 400;
			border-bottom: 1px solid #f0f0f0;
		}

		.integralItemBox {
			.acea-row {
				height: 100rpx;
				line-height: 100rpx;
				border-bottom: 1px solid #f0f0f0;
			}
		}
	}

	.modifyBnt {
		font-size: 32rpx;
		color: #fff;
		width: 700rpx;
		height: 90rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 90rpx;
		margin: 76rpx auto 0 auto;
		background: #108ccf;
	}
	.popupBox{
		width:100%;
		height:400rpx;
		background:#fff;
		font-size:28rpx;
		border-radius: 10rpx 10rpx 0 0;
		.popupBoxTitle{
			width:100%;
			height:100rpx;
			line-height:100rpx;
			text-align:center;
			font-size:30rpx;
			color:#282828;
		}
		uni-input{
			width:90%;
			height:100rpx;
			border:1px solid #ccc;
			margin:0 auto;
			border-radius: 15rpx;
			padding:10rpx 20rpx;
			box-sizing: border-box;
		}
	}
	.rechargeButton{
		background:$theme-color;
		display:inline-block;
		vertical-align: middle;
		margin-left:10rpx;
		height:60rpx;
		color:#fff;
		padding:0 30rpx;
		line-height:60rpx;
		border-radius: 40rpx;
		font-size:24rpx;
	}
</style>
